<template>
  <a-drawer
    v-model:visible="vdata.isShow"
    width="75%"
    placement="right"
    :closable="true"
    title="交接班记录"
    @close="vdata.isShow = false"
  >
    <a-form
      ref="infoFormModel"
      style="padding-bottom:50px"
      layout="vertical"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">门店信息</a-divider>
      <a-row justify="space-between" type="flex">
        <a-col :sm="12">
          <a-descriptions>
            <a-descriptions-item label="商户编号">
              {{ vdata.storeInfo.mchNo }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :sm="12">
          <a-descriptions>
            <a-descriptions-item label="服务商编号">
              {{ vdata.storeInfo.isvNo }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :sm="12">
          <a-descriptions>
            <a-descriptions-item label="门店Id">
              {{ vdata.storeInfo.storeId }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :sm="12">
          <a-descriptions>
            <a-descriptions-item label="门店名称">
              {{ vdata.storeInfo.storeName }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
      </a-row>

      <!-- 员工交接班列表 -->
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">员工交接班信息</a-divider>
      <div>
        <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="resetFunc">
          <a-form-item label="" class="table-search-item">
            <JeepayDateRangePicker ref="dateRangePicker" v-model:value="vdata.searchData['queryDateRange']" customDateRangeType="date" />
          </a-form-item>
          <jeepay-text-up v-model:value="vdata.searchData['userNo']" :placeholder="'员工编号'" />
          <jeepay-text-up v-model:value="vdata.searchData['realname']" :placeholder="'员工姓名'" />
        </JeepaySearchForm>

        <div class="list-table">
          <JeepayTable
            ref="infoTable"
            :initData="false"
            :reqTableDataFunc="reqTableDataFunc"
            :tableColumns="tableColumns"
            :searchData="vdata.searchData"
            rowKey="id"
            scrollX="100%"
          >
            <template #headerCell="{ column }">
              <span v-if="column.tooltipTitle">
                {{ column.title }}
                <a-tooltip :title="column.tooltipTitle"><info-circle-outlined /></a-tooltip>
              </span>
            </template>
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'successAmount'">
                <b style="color: #15B86C;">￥{{ record.successAmount / 100 }}</b>
              </template>
              <template v-if="column.key === 'successCount'">
                <b style="color: #15B86C;">{{ record.successCount }}</b>
              </template>
              <template v-if="column.key === 'refundAmount'">
                <b style="color: #FF6848;">￥{{ record.refundAmount / 100 }}</b>
              </template>
              <template v-if="column.key === 'refundCount'">
                <b style="color: #FF6848;">{{ record.refundCount }}</b>
              </template>
              <template v-if="column.key === 'payAmount'">
                <b style="color: #15B86C;">￥{{ (record.successAmount - record.refundAmount) / 100 }}</b>
              </template>
            </template>
          </JeepayTable>
        </div>
      </div>
    </a-form>
  </a-drawer>
</template>

<script lang="ts" setup>
import { req, API_URL_MCH_WORK_RECORD_LIST } from '@/api/manage'
import { reactive, ref, nextTick } from 'vue'

const infoFormModel = ref()

const tableColumns = reactive([
  { key: 'sysUserId', title: '用户ID', dataIndex: 'sysUserId'},
  { key: 'realname', title: '员工姓名', dataIndex: 'realname'},
  { key: 'userNo', title: '员工编号', dataIndex: 'userNo'},
  { key: 'successAmount', title: '成交金额', tooltipTitle: '支付成功的订单金额，包含部分退款及全额退款的订单', dataIndex: 'successAmount'},
  { key: 'successCount', title: '成交笔数', dataIndex: 'successCount'},
  { key: 'refundAmount', title: '退款金额', dataIndex: 'refundAmount'},
  { key: 'refundCount', title: '退款总笔数', tooltipTitle: '实际退款订单笔数，若一笔已成交订单退款多次，则计多次', dataIndex: 'refundCount'},
  { key: 'payAmount', title: '实收金额', tooltipTitle: '实际收款金额（成交金额-退款金额）', dataIndex: 'payAmount'},
  { key: 'workStartTime', title: '上班打卡时间', dataIndex: 'workStartTime'},
  { key: 'loginPageType', title: '登录方式', dataIndex: 'loginPageType'},
  { key: 'workEndTime', title: '下班打卡时间', dataIndex: 'workEndTime'},
  { key: 'logoutPageType', title: '登出方式', dataIndex: 'logoutPageType'}
])

// 当前 table 组件
const infoTable = ref()
const dateRangePicker = ref()
const vdata :any = reactive({
	value: 1, // 单选框默认的值
	isShow: false, // 是否显示弹层/抽屉
  storeInfo: null,
  searchData: {queryDateRange: 'today'},
})

defineExpose({ show })
  function show(storeInfo) { // 弹层打开事件
  vdata.storeInfo = storeInfo
  vdata.isShow = true // 立马展示弹层信息
  searchFunc()
}

// 表格搜索
function searchFunc () {
  nextTick(() => {
    infoTable.value.refTable(true)
  })
}

function resetFunc(){ 
  dateRangePicker.value.returnSelectModel()
  vdata.searchData = {queryDateRange: 'today'}
}

// 请求table接口数据
function reqTableDataFunc (params){
  return req.list(API_URL_MCH_WORK_RECORD_LIST, Object.assign({ storeId: vdata.storeInfo.storeId }, params))
}

</script>
